<template>
  <qx-table :dbRowClick="rowDblClick" :option="tableOption" :remoteData="remoteData">
    <template v-slot:top>
      <qx-form v-model="searchForm" :option="tableOption" isSearch @submit="startSearch"></qx-form>
    </template>
    <template v-slot:menuLeftR>
      <q-icon color="warning" name="mdi-map-marker-question cursor-pointer cursor-hover" size="1.5rem">
        <q-tooltip class="q-pa-md" v-bind="$tooltipAttr">{{ $t('Misc.DblClickTips') }}</q-tooltip>
      </q-icon>
    </template>
  </qx-table>
  <q-modal v-model="modalVisible" :header="`${$t('Misc.SpecifyDetails')}`" :menuBtn="false" :persistent="false"
           width="620">
    <QInfo :columns="tableOption.column || []" :rowInfo="rowInfo" cols="2" headerWidth="100"></QInfo>
  </q-modal>
</template>
<script setup>
import { i18n, toI18nName } from 'boot/i18n.js'
import { date } from 'quasar'
import { getRemoteData } from 'src/enum/ajaxRemoteData.js'
import { computed, onMounted, ref } from 'vue'

const rowInfo = ref({})
const currentDate = new Date()
const AGVBrands = ref([])
const searchForm = ref({})
const modalVisible = ref(false)
const remoteData = ref({ dicUrl: '/tpm/yfagv/api/agvStatisticsTaskDetails/list' })
getRemoteData('agv_brand', '/yfagv/api/agvCfgBrand/list').then(data => (AGVBrands.value = data))
const tableOption = computed(() => {
  const defaultDate = date.formatDate(currentDate, 'YYYY-MM-DD')
  return {
    span: 22, export: true, labelWidth: 80, searchSpan: 5,
    column: [{
      label: `${i18n.t('TaskCore.TaskCode')}`, field: 'taskCode', minWidth: 80
    }, {
      label: `${i18n.t('AGVCore.AGVBrand')}`, field: 'agvBrandCode', type: 'select', options: AGVBrands.value,
      minWidth: 80, props: { label: `${toI18nName('agvBrandNameZhCn')}`, value: 'agvBrandCode' }
    }, {
      label: `${i18n.t('AGVCore.AGVCode')}`, field: 'agvCode', minWidth: 80
    }, {
      label: `${i18n.t('Misc.StatisticsTime')}`, field: 'countTime', type: 'daterange', minWidth: 80,
      searchValue: { from: defaultDate, to: defaultDate }, clearable: false
    }, {
      label: `${i18n.t('StartTime')}`, field: 'taskStartTime', minWidth: 80, search: false
    }, {
      label: `${i18n.t('Misc.CompletionTime')}`, field: 'taskEndTime', minWidth: 80, search: false
    }, {
      label: `${i18n.t('TaskCore.TaskDuration')}(s)`, field: 'taskTime', minWidth: 80, search: false,
      headerClasses: 'table-header-inherit'
    }, {
      label: `${i18n.t('TaskCore.TaskDistance')}(m)`, field: 'taskDistance', minWidth: 80, search: false,
      headerClasses: 'table-header-inherit'
    }, {
      label: `${i18n.t('TaskCore.TaskStopDuration')}(s)`, field: 'taskStop', minWidth: 80, search: false,
      headerClasses: 'table-header-inherit'
    }, {
      label: `${i18n.t('TaskCore.PickupDuration')}(s)`, field: 'taskPickTime', minWidth: 80, search: false,
      headerClasses: 'table-header-inherit'
    }, {
      label: `${i18n.t('TaskCore.PickupDistance')}(m)`, field: 'taskPickDistance', minWidth: 80, search: false,
      headerClasses: 'table-header-inherit'
    }, {
      label: `${i18n.t('TaskCore.PickupStopDuration')}(s)`, field: 'taskPickStop', minWidth: 80, search: false,
      headerClasses: 'table-header-inherit'
    }, {
      label: `${i18n.t('TaskCore.DeliveryDuration')}(s)`, field: 'taskDeliverTime', minWidth: 80, search: false,
      headerClasses: 'table-header-inherit'
    }, {
      label: `${i18n.t('TaskCore.DeliveryDistance')}(m)`, field: 'taskDelverDistance', minWidth: 80, search: false,
      headerClasses: 'table-header-inherit'
    }, {
      label: `${i18n.t('TaskCore.DeliveryStopDuration')}(s)`, field: 'taskDeliverStop', minWidth: 80, search: false,
      headerClasses: 'table-header-inherit'
    }]
  }
})

const rowDblClick = row => {
  rowInfo.value = row
  modalVisible.value = true
}
const formatSearchForm = () => {
  const params = { ...searchForm.value }
  if (searchForm.value.countTime?.from) {
    params.beginTime = params.countTime?.from
    params.endTime = params.countTime?.to
    delete params.countTime
  }
  return { ...params }
}
const startSearch = (_, done) => {
  remoteData.value.params = formatSearchForm()
  remoteData.value.clearSelected = true
  if (done) done()
}

onMounted(startSearch)
</script>